body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background: #4a627a;
    color: #fff;
    font-family: 'Open Sans', Helvetica, sans-serif;
}

.menu-icon {
    position: absolute;
    z-index: 2;
    width: 50px;
    height: 26px;
    top: 187px;
    left: 175px;
    cursor: pointer;

    .line-top,
    .line-bottom {
        position: absolute;
        width: 50px;
        height: 4px;
        top: 0;
        left: 0;
        background: #fff;
        animation: line-top-close 1s ease both;
    }

    .line-bottom {
        top: initial;
        bottom: 0;
        animation: line-bottom-close 1s ease both;
    }

    &.active {
        pointer-events: none;
        .line-top {
            animation: line-top-open 1s ease both;
        }
        .line-bottom {
            animation: line-bottom-open 1s ease both;
        }
    }

    &.paused {
        .line-top,
        .line-bottom {
            animation: none;
        }
    }
}

.menu {
    position: absolute;
    width: 300px;
    height: 20px;
    top: 190px;
    left: 50px;
    padding: 0 10px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease-in-out;

    &.active {
        opacity: 1;
        pointer-events: all;
        transition: all 0.5s ease-in-out 0.5s;
    }

    ul {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        list-style: none;
        font-size: 16px;
        line-height: 20px;
        font-weight: 600;
        text-transform: uppercase;
        width: 280px;
        margin: 0;
        padding: 0;

        li {
            position: relative;
            display: block;
            flex: 0 1 auto;
            margin: 0;
            padding: 0;
            cursor: pointer;
            transition: all 0.3s ease-in-out;

            &:hover {
                opacity: 0.6;
            }
        }
    }
}

@keyframes line-top-open {
    0% {
        transform: translate3d(0, 0, 0) scaleY(1) scaleX(1);
    }
    20% {
        transform: translate3d(0, 3px, 0) scaleY(1) scaleX(1);
    }
    40% {
        transform: translate3d(0, -20px, 0) scaleY(0.5) scaleX(1);
    }
    100% {
        transform: translate3d(0, -20px, 0) scaleY(0.5) scaleX(6);
    }
}
@keyframes line-bottom-open {
    0% {
        transform: translate3d(0, 0, 0) scaleY(1) scaleX(1);
    }
    20% {
        transform: translate3d(0, -3px, 0) scaleY(1) scaleX(1);
    }
    40% {
        transform: translate3d(0, 20px, 0) scaleY(0.5) scaleX(1);
    }
    100% {
        transform: translate3d(0, 20px, 0) scaleY(0.5) scaleX(6);
    }
}

@keyframes line-top-close {
    0% {
        transform: translate3d(0, -20px, 0) scaleY(0.5) scaleX(6);
    }
    60% {
        transform: translate3d(0, -20px, 0) scaleY(0.5) scaleX(1);
    }
    100% {
        transform: translate3d(0, 0, 0) scaleY(1) scaleX(1);
    }
}
@keyframes line-bottom-close {
    0% {
        transform: translate3d(0, 20px, 0) scaleY(0.5) scaleX(6);
    }
    60% {
        transform: translate3d(0, 20px, 0) scaleY(0.5) scaleX(1);
    }
    100% {
        transform: translate3d(0, 0, 0) scaleY(1) scaleX(1);
    }
}
